@import 'common_style.less';
@import 'widgets/menu.less';
@import 'widgets/form.less';
@import 'widgets/list.less';
@import 'widgets/page.less';
@import 'user.less';

@header-height: 5%;
@mainColor: #EBEBEB;
@hightColor: #417BB5;

body {
	font-size: .90rem;
}

body.admin-shell {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	a {
		text-decoration: none;
		color: #939da8;
	}

	.memberNav {
		display: none;
	}

	header {
		width: 100%;
		height: @header-height;
		border-top: 1px solid white;
		border-bottom: 1px solid gray;
		.gradient (top , #78B1ED , @hightColor);
		display: table;
		h1 , menu {
			display: table-cell;
			vertical-align: middle;
			color: white;
		}

		h1 {
			text-shadow: 0px 1px 0px black;
			font-weight: normal;
			font-size: 1.1rem;
			text-indent: 2em;
			letter-spacing: 3px;
		}

		menu {
			margin: 0;
			font-size: .9rem;
			padding-right: 2%;
			text-align: right;
			a {
				color: white;
			}
		}
	}
}

.aj-accordion-menu {
	i{
		width:16px;
		height:16px;
		display:inline-block;
		font: normal normal normal 14px/1 FontAwesome;
	}
	
	.content i::before {
		content: "\f0f6";
	}
	.shop i::before {
		content: "\f07a";
	}
	.user i::before {
		content: "\f2c0";
	}
	.content i::before {
		content: "\f1c0";
	}
	.site i::before {
		content: "\f26b";
	}
	.config i::before {
		content: "\f108";
	}
	.system i::before {
		content: "\f013";
	}
	.tools i::before {
		content: "\f233";
	}
	.accountCenter i::before {
		content: "\f2bd";
	}
}

@sidebarWidth: 15%;
.side {
	.widthFx;
	width: @sidebarWidth;
	height: 100-@header-height;
	float: left;
	position: relative;
	.gradient (left , #FAFAFA , @mainColor);
	.rightTop_title {
		overflow: hidden;
		width: 80%;
		height: 30px;
		line-height: 30px;
		background-color: #FAFAFA;
		float: right;
	}

	.rightTop {
		overflow: hidden;
		clear: right;
		width: 100%;
		height: 30px;
		background: url("") no-repeat right top;
	}

	.closeBtn {
		position: absolute;
		right: 0;
		top: 0;
		width: 5px;
		height: 100%;
		background: #ECECEC url("") no-repeat scroll 2px 50%;
		border-left: 1px solid #D1D1D1;
		border-right: 1px solid #D1D1D1;
		cursor: pointer;
	}
}

.iframe {
	.widthFx;
	width: 100-@sidebarWidth;
	height: 100-@header-height;
	margin-right: -999px;
	overflow: hidden;
	iframe {
		width: 100%;
		border: 0;
		height: 100%;
	}
}

header.ajaxjs-admin-header {
	padding: 2% 0;
	padding-bottom: 1.5%;
	h4 {
	}

	& > div {
		text-align: right;
		padding: 0 3%;
	}

	fieldset {
		border-bottom: 0;
		border-left: 0;
		border-right: 0;
		border-top: 1px solid lightgray;
		width: 96%;
		margin: 0 auto;
		letter-spacing: 5px;
		legend {
			margin-left: 1em;
			font-size: 1.2rem;
			span {
				font-size: .8rem;
			}
		}
	}
}

.aj-admin-filter-panel {
	width: 96%;
	margin: 0 auto;
	padding: 1%;
	padding-top: 0;
	text-align: right;
	form {
		display: inline;
	}
}

.pager {
	text-align: center;
	padding: 2%;
}

.configForm {
	margin:0 auto !important;
	width:60%;
	
	.required-note{
		color:red;
	}
	.label {
		width: 15%;
	}

	input[type=text] , textarea {
		width:80%;
	}
	
	&>div{
		padding:2% 0!important;
	}
	
}

.all-config-classic {
	ul{
	    box-sizing: border-box;
	}
}

.config-site-stru, .all-config-classic {
	.aj-form;
	border: 1px solid lightgray;
	min-width: 1200px;
	width: 96%;
	position: relative;
	margin: 0 auto;
	

	li {
		overflow: hidden;
		background-color: #f3f3f3;
		box-sizing: border-box;
		padding-left: 10px;
		min-height: 38px;
		line-height: 38px;
		border-top: 1px solid white;
		border-bottom: 1px solid lightgray;
		&:first-child {
			border-top: 0;
		}

		&:last-child {
			border-bottom: 0;
		}

		&:nth-child(odd) {
		}

		.fa , .up , .down {
			cursor: pointer;
		}

		button {
			width: 100px;
			padding: .4em .5em;
			margin-right: 2%;
		}
	}

	.parentNode {
		cursor: pointer;
	}

	.subTree {
		overflow: hidden;
		transition: height linear 100ms;
		width: 100%;
		box-sizing: border-box;
	}

	.valueHolder {
		width: 900px;
		float: right;
	}

	.tipsNote {
		position: absolute;
		width: 260px;
		right: -250px;
		transition: top linear 100ms;
		b {
			letter-spacing: 2px;
		}
	}

	span.name {
		display: inline-block;
		width: 200px;
	}

	select {
		width: 100%;
	}

	.valueHolder > textarea {
		width: 100% ! important;
		margin: 2% 0;
		min-height: 60px;
	}

	.htmlEditor {
		width: 100% ! important;
		margin-top: 10px ! important;
		ul.toolbar {
		}

		li {
			overflow: inherit;
			background-color: inherit;
			box-sizing: border-box;
			padding-left: inherit;
			min-height: inherit;
			line-height: 20px;
			border-top: 0;
			border-bottom: inherit;
		}

		textarea {
			margin-bottom: 14px;
		}
	}
}

// 列表页
.list-ui {
	.ajaxjs-niceTable {
		width: 92%;
		margin: 0 auto;
	}
}

.pid {
	form {
		padding: 1% 2%;
		margin: 0;
		background-color: #f5f5f5;
		text-align: center;
	}

	.panel {
		width: 90%;
		max-width: 1000px;
		margin: 0 auto;
	}

	table {
		margin: 0 auto;
		width: 100%;
		thead {
			td {
				font-weight: bold;
				text-align: center;
			}
		}

		td {
			text-align: left;
		}

		td.id {
			text-align: center;
		}

		td.createDate {
			text-align: center;
			width: 180px;
		}

		td.action {
			text-align: center;
			width: 240px;
		}

		td.name {
			width: 280px;
		}

		td.content {
			width: 390px;
		}
	}
}

// 上传图片
.uploadBox {
	.simpleTab_hoz {
		width: 50%;
		height: 30%;
	}

	.upload-btns {
		float: right;
		width: 60%;
	}
}

// 图片列表
.articlePics , .avater {
	margin: 1% 2%;
	overflow: hidden;
	li {
		position: relative;
		max-width: 300px;
		max-height: 160px;
		float: left;
		margin-right: 20px;
		img {
			max-width: 300px;
			max-height: 160px;
			cursor: move;
		}

		.menu {
			height: 0;
			width: 100%;
			transition: height 500ms;
			overflow: hidden;
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, .2);
			padding: 0 2px;
			box-sizing: border-box;
			color: black;
			line-height: 25px;
			cursor: pointer;
			text-align: center;
			letter-spacing: 2px;
			font-size: .8rem;
			text-shadow: 0 1px white, 1px 0 white, -1px 0 white, 0 -1px white;
			span:hover {
				color: red;
			}
		}

		&:hover .menu {
			height: 25px;
		}
	}
}

table.listTable {
	width: 96%;
	margin: 0 auto;
}

.listTable.pager {
	text-align: center;
}

body {
	opacity: 0;
	transition: opacity 0.3s;
}

body.active {
	opacity: 1;
}

.aj-dhtml-border {
	width: 300px;
	height: 300px;
	transition: border 5s;
	position: relative;
	margin: 3%;
	&:before , &:after {
		content: "";
		position: absolute;
		bottom: -1px;
		left: -1px;
		right: -1px;
		top: -1px;
		transition: all 1s;
	}

	&:before {
		transform: scale(1, 0);
		border-left: 1px solid red;
		border-right: 1px solid red;
	}

	&:after {
		transform: scale(0, 1);
		border-top: 1px solid red;
		border-bottom: 1px solid red;
	}

	&:hover {
		&:before , &:after {
			transform: scale(1);
			transition: all 1s;
		}
	}
}

table.aj-grid {
	th {
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	td {
		//min-width: 120px;
		padding: 10px 20px;
	}

	th.active {
		color: #fff;
		.arrow {
			opacity: 1;
		}
	}

	.arrow {
		display: inline-block;
		vertical-align: middle;
		width: 0;
		height: 0;
		margin-left: 5px;
		opacity: 0.66;
		&.asc {
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-bottom: 4px solid #fff;
		}

		&.dsc {
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 4px solid #fff;
		}
	}
}

.treeGrid {
	overflow: hidden;
	width: 95%;
	margin: 0 auto;
	.left {
		float: left;
		width: 22%;
	}

	.right {
		float: right;
		width: 77%;
		.inline-search {
			float: left;
		}

		table {
			width: 99%;
		}
	}
}

.safe {
	margin: 0 5%;
	li {
		border-bottom: 1px solid lightgray;
		padding: 4% 0;
		div {
			display: inline-block;
			min-width: 25%;
			box-sizing: border-box;
			&.ok {
				color: green;
				&::before {
					content: "\2714";
					border: 2px solid;
					text-align: center;
					padding: 1px 3px 1px 3px;
					border-radius: 50%;
					margin-right: 10px;
					font-size: 12px;
				}
			}

			&.fail {
				color: red;
				&::before {
					content: "\2716";
					border: 2px solid;
					text-align: center;
					padding: 1px 3px 1px 3px;
					border-radius: 50%;
					margin-right: 10px;
					font-size: 12px;
				}
			}
		}

		a {
			float: right;
			font-weight: bold;
		}
	}
}

.sectionMgr {
	margin:0 auto;
	width:96%;
	
	.btns {
		text-align: right;
		margin: 1%;
		img {
			width: 16px;
			vertical-align: sub;
		}
	}
	
	.left {
		float:left;
		width:20%;
		height:500px; 
		border:1px solid lightgray;
		border-right:none;
		box-sizing: border-box;
	}
	
	.left .title {
		background-color:#f7f8fa;
		height:37px;
		text-align:center;
		line-height:37px;
		font-weight:bold;
		margin-bottom:5%;
	}
	
	.aj-tableList {
		height: 660px;
		width:80%;
		border:1px solid lightgray;
	    float: right;
	    box-sizing: border-box;
	}
	
}

.pickup-entity {
	width: 900px;
	min-height: 600px;
	
	.type {
		float: left;
		width: 20%;
		margin-top: 4%;
		   
		h4 {
			font-size: .9rem;
		}
		
		li{
			background-color: #f7f8fa;
			margin-bottom: 2%;
			padding: 2%;
			cursor: pointer;
		}
	}
	
	.grid {
		float: right;
		width: 80%;
		
		&>form {
			float: left;
		}
		
		table {
			width: 100%;
			border: 0;
			td, th {
				border: 0;
			}
			img{
				max-width:80px;
				max-height:80px;
			}
			a{
				text-decoration: underline;
			}
			td{
				height:80px;
			}
		}
		
		footer{
			 margin-top: 5%;
		}
	}
}

.attchementMgr {
	h3{
		text-align:left;
		margin:0 0 2%;
		span{
			font-size:.8rem; color:gray;font-weight:nornaml;
		}
	}
	.aj-tableList{
		padding-right: 30px;
		header {
			line-height: 28px;
		}
	} 
	.aj-page-list{
		
		min-height:100px;
		
	}
	.aj-xhr-upload {
		width:90px;
	}
	
	ol{
		width:400px;
		text-align: left;
	}
}

// 让你的界面看上去更像软件
.soft-container {
	border: 1px solid lightgray;
	margin: 15px;
	& > .box {
		border-top: 1px solid white;
		border-bottom: 1px solid lightgray;
		background-color: #efefef;
		overflow: hidden;
		
		&.padding {
			padding: 5px;
			box-sizing: border-box;
		}
	}
	
	.toolbar {
		height:36px;
		line-height:36px;
		background-color: #efefef;
		ul{
			display: inline-block;
			font-size:0;
			vertical-align: middle;
			li{
				vertical-align:middle;
				font-size:.8rem;
				display:inline-block; 
				height:28px;
				line-height:28px;
				text-align: center;
				min-width: 80px;
				padding: 0 8px;
				border-right:1px solid white;
				border-left:1px solid lightgray;
				cursor: pointer;
				color:gray;
				letter-spacing:2px;
				&:hover{
					color:black;
				}
				&:first-child{
					border-left:0;
				}
				&:last-child{
					border-right:0;
				}
			}
		}
		
		form {
			margin:0 10px;
			display: inline-block;
			input{
				.aj-input;
				min-height: inherit;
			    height: 25px;
			    vertical-align: baseline;
			}
			button{
				.aj-btn;
				margin:0;
				min-height: 25px;
				height: 25px;
				line-height:25px;
				padding: .1em 1.3em;
			}
		}
		
		&.bottom{
			//margin-top:1px;
			border-top: 1px solid lightgray;
			padding:0 2%;
			input{
				min-height:20px;
				text-align:center;
				padding: 0;
			}
			select{
				min-height:22px;
				
			}
		}
	}
	.main-panel {
		position: relative;	
		min-height: 500px;
		border-bottom: 1px lightgray solid;
		overflow: auto;
		
		.theader-bg{
			position: absolute;
			top:0;
			left:0;
			height:38px;
			min-width: 400px;
			width:100%;
			//background-color: #efefef;
			background-color: #dce9f9;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
			.gradient (top , #ebf3fc , #dce9f9);
			text-align: center;
			border-top: none;
		
    		z-index: -1;
		    border-top: 1px white solid;
		    border-bottom: 1px lightgray solid;
		}	
		table{
			table-layout:fixed;
			word-break: break-all;
			border-bottom: 1px solid #ccc;
			border-spacing: 0;
			
			&.in-layer {
				th, td{
					border-right:inherit;
				}
				th{
					border-top:1px solid white;
					border-bottom:1px solid lightgray;
				}
				td{
					border-top:inherit;
				}
				width:100%;
				max-width:800px;
			}

			td , th {
				border-right: 1px solid #ccc;
				
				padding: 10px;
				text-align: center;
			}
			
			tbody {
				tr {
					.transition (background-color 700ms ease-in-out);
		
					&:nth-child(even) {
						background: #f5f5f5;
						box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
					}
					&:hover {
						background-color: #faf2c8;
					}
				}
			}
		
			th {
				text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
			}
			td {
				border-top: 1px solid #ccc;
			}
		}
	}
	
	& > .bottom-bar{
	//	border-top: 1px lightgray solid;
		border-bottom: 0;
	}
}
.aj-modal .main-panel table th {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
	.gradient (top , #ebf3fc , #dce9f9);
}

.tree-like {
	select{
		width:100%;
		border:0;
		height: 100%;
	}
	.main-panel {
		height:500px;
	}
}

// 权限管理系统
.assign-right {
	h3{
		padding-left: 2%; 
		font-weight: bold;
	}
	.main-panel{
		max-height:500px; 
		min-width:900px;
		overflow-y: scroll;
		border-top:1px solid white;
		
		.tree-panel {
			float: left;
			h4{
				width: 200px;
				font-size: .8rem;
				height:20px;
				margin-bottom: 5%;
				background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
				border-bottom: 1px solid lightgray;
			}
		}
		
		&>table{
			border-left: 1px solid lightgray;
		}
	}
	th {
		padding: 0 !important;
		font-size:.9rem;
	}
	
	caption {
		font-size: 1.2rem;
		padding:2%;
		font-weight: bold;
	}
	
	/*模拟对角线*/
	.out {
		border-top: 40px #D6D3D6 solid; /*上边框宽度等于表格第一行行高*/
		width: 0px; /*让容器宽度为0*/
		height: 0px; /*让容器高度为0*/
		border-left: 180px #BDBABD solid; /*左边框宽度等于表格第一行第一格宽度*/
		position: relative; /*让里面的两个子容器绝对定位*/
	}
	
	b {
		font-style: normal;
		display: block;
		position: absolute;
		top: -40px;
		left: -100px;
		width: 85px;
	}
	
	em {
		font-style: normal;
		display: block;
		position: absolute;
		top: -25px;
		left: -170px;
		width: 55x;
	}
	
	.t1{
		text-align:center;
	}
	.crud label{
		cursor: pointer;
	}
	.crud.disabled label {
		color:gray;
		cursor: not-allowed;
	}
}

.aj-table-form{
	.aj-form;
	& > table {
		width: 100%;
		border-spacing: 0;
		
		& > tbody {
			&>tr:nth-child(even) {
				background: #f5f5f5;
			}
			
			&> tr > td{
				text-align:left;
				border-top:1px solid white;
				border-bottom:1px solid lightgray;
				padding:2% 0;
				padding-left:10px;
				box-sizing: border-box;
			}
		}
	}
}

.admin-panel {
	margin: 0 10px;	
	border: 1px lightgray solid;
	border-top: 1px white solid;
	border-left:0;
	


}

.aj-grid-inline-edit-row {
	.control{
		text-align:center;
		color:gray;
		padding: 0 50px;
		span{
			cursor: pointer;
			img {
				vertical-align: sub;
			}
			&:hover{
				color: black;
			}
		}
	} 
	&.editing {
		background-color:#acbad4!important;
	}
	td{
		box-sizing: border-box;
		height:40px;
		word-break: break-all;
	}
	td input[type=text] {
		display: inline;
		max-width: 100%;
		height:33px;
		box-sizing: border-box;
		border:2px solid transparent;
		text-align:center;
		//padding: 0 5px;
		background-color: transparent;
		&:focus{
			border-color:gray;
			background-color: #fffcd5;
		}
	}
	.cell{
		min-width: 100px;
	}
	.selectCheckbox{
		width: 30px;
	}
}